<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title >在线加密解密</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="/static/css/semantic.css" th:href="@{http://8.134.18.98/static/css/semantic.css}">
    <link rel="stylesheet" href="/static/css/typo.css"th:href="@{http://8.134.18.98/static/css/typo.css}">
    <link rel="stylesheet" href="/static/css/me.css" th:href="@{http://8.134.18.98/static/css/me.css}">
    <link rel="stylesheet" href="/static/lib/editormd/css/editormd.css"th:href="@{/lib/editormd/css/editormd.css}">
</head>
<body class="m-bg">
<script th:inline="none" src="/static/js/jquery.min.js" th:src="@{http://8.134.18.98/static/js/jquery.min.js}"></script>
<script th:inline="none" src="/static/js/semantic.js"th:src="@{http://8.134.18.98/static/js/semantic.js}"></script>

<!--导航-->


<!--中间内容-->

<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <form method="get" action="#"  th:action=" @{/cryptography}"  class="ui form">

            <div class="required field">
<!--                <span style="margin-left: 5px;">加密前字符串</span>-->
                <div style="z-index: 1 !important;">
                    <textarea placeholder="加密前字符串..." name="plaintext" th:text="${encryption?.plaintext}"></textarea>
                </div>
            </div>

            <div class="required field" >
                <!--                <span style="margin-left: 5px;">秘钥</span>-->
                <div style="z-index: 1 !important;">
                    <input th:name="secretKey" placeholder="秘钥..." th:value="${encryption?.secretKey}" ></input>
                </div>
            </div>


            <div class="ui error message"></div>

            <div class="ui left aligned container">
                <button class="ui teal submit button" name="button" value="RC4">RC4</button>
                <button class="ui blue submit button" name="button" value="RSA" >RSA</button>
                <button class="ui red submit button" name="button" value="DES"  disabled>DES</button>
            </div>

            <br>
            <br>
            <br>
            <div class="required field">

<!--                <span style="margin-left: 5px;">结果</span>-->
                <div style="z-index: 1 !important;">
                    <textarea placeholder="结果..." name="result" th:text="${encryption?.result}"></textarea>
                </div>
            </div>

        </form>
    </div>
</div>

<br>
<br>

<th:block th:if="${encryption?.button}=='RC4'">
    <script>

        $('.ui.dropdown').dropdown({
            on : 'hover'
        })  ;
        $('.ui.form').form({
            fields: {
                plaintext: {
                    identifier: 'plaintext',
                    rules: [{
                        type: 'empty',
                        prompt: '提示:请输入需要加密的字符串'
                    }]
                },

                secretKey: {
                    identifier: 'secretKey',
                    rules: [{
                        type: 'empty',
                        prompt: '提示:请输入秘钥'
                    }]
                },
            }
        });

        //消息提示关闭初始化
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });
    </script>
</th:block>
<th:block th:if="${encryption?.button}=='DES'">
    <script>

        $('.ui.dropdown').dropdown({
            on : 'hover'
        })  ;
        $('.ui.form').form({
            fields: {
                plaintext: {
                    identifier: 'plaintext',
                    rules: [{
                        type: 'empty',
                        prompt: '提示:请输入需要加密的字符串'
                    }]
                },

                secretKey: {
                    identifier: 'secretKey',
                    rules: [{
                        type: 'empty',
                        prompt: '提示:请输入秘钥'
                    }]
                },
            }
        });

        //消息提示关闭初始化
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });
    </script>
</th:block>
<th:block th:if="${encryption?.button}=='RSA'">
    <script>

        $('.ui.dropdown').dropdown({
            on : 'hover'
        })  ;
        $('.ui.form').form({
            fields: {
                plaintext: {
                    identifier: 'plaintext',
                    rules: [{
                        type: 'empty',
                        prompt: '提示:请输入需要加密的字符串'
                    }]
                }
            }
        });

        //消息提示关闭初始化
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });
    </script>
</th:block>


</body>
</html>